<template>
  <div>
    <!-- <van-nav-bar title="城市列表" left-arrow @click-left="onClickLeft" /> -->
    <TitleHeader :title="title"></TitleHeader>
    <van-index-bar :index-list="indexList">
      <van-index-anchor
        >当前城市
        <van-cell :title="city" @click="setCity(city)" />
      </van-index-anchor>
      <van-index-anchor
        :index="item.index"
        v-for="item in list"
        :key="item.index"
        >{{ item.index }}
        <van-cell
          :title="item.label"
          v-for="item in item.data"
          :key="item.value"
          @click="setCity(item.label)"
        />
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "location-page",
  components: {},
  props: {},
  data() {
    return {
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "Q",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
      list: [],
      title: "城市列表",
      city: localStorage.getItem("city")
        ? localStorage.getItem("city")
        : "上海",
    };
  },
  computed: {},
  watch: {},
  async created() {
    const data = await request({
      url: "/area/city",
      params: { level: 1 },
    });

    let obj = [];

    data.body.map((item) => {
      item.short = item.short[0].toUpperCase();
    });
    this.indexList.forEach((item) => {
      obj.push({ index: item, data: [] });
    });

    obj.map((item) => {
      data.body.map((el) => {
        if (item.index == el.short) {
          item.data.push(el);
        }
      });
    });
    this.list = obj;
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    setCity(value) {
      localStorage.setItem("city", value);
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .van-nav-bar {
  // position: -webkit-sticky;
  width: 100%;
  position: fixed;
  z-index: 9999999;
  background-color: #21b97a;
}
::v-deep .van-nav-bar__title {
  color: #fff;
  font-size: 18px;
}
.van-index-bar {
  padding-top: 50px;
}
::v-deep .van-nav-bar .van-icon {
  color: #fff;
}
::v-deep .van-index-bar__index {
  font-size: 14px;
  margin-top: 6px;
  border-radius: 50%;
  padding: 0;
}
::v-deep .van-index-bar__index--active {
  color: #fff;
  background-color: #21b97a;
}
::v-deep .van-index-anchor--sticky {
  color: #21b97a;
}
</style>
